<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { useForm } from "./utils/form";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import EditPen from "@iconify-icons/ep/edit-pen";
import Motion from "@/views/login/utils/motion";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    creater: "",
    name: "",
    paperid: "",
    paperName: "",
    starttime: "",
    endtime: "",
    late: -1,
    del: 0,
    description: "",
    addtime: "",
    updatetime: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function selectRow(row) {
  newFormInline.value.paperid = row.id;
  newFormInline.value.paperName = row.name;
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

const {
  loading,
  columns,
  paperList,
  pagination,
  onSearch,
  handleSizeChange,
  handleCurrentChange,
  handleSelectionChange
} = useForm();
</script>

<template>
  <div class="flex justify-between">
    <div class="min-w-[500px] mr-2">
      <el-card>
        <template #header>
          <div class="font-medium">任务信息</div>
        </template>
        <el-form
          ref="ruleFormRef"
          :model="newFormInline"
          :rules="formRules"
          label-width="82px"
        >
          <Motion>
            <el-form-item label="任务名称" prop="name">
              <el-input
                type="textarea"
                v-model="newFormInline.name"
                clearable
                placeholder="请输入任务名称"
              />
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="试卷名称" prop="paperName">
              <el-input
                type="textarea"
                v-model="newFormInline.paperName"
                readonly
                clearable
                placeholder="请输入任务名称"
              />
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="考试开始" prop="starttime">
              <el-date-picker
                v-model="newFormInline.starttime"
                type="datetime"
                placeholder="请输入考试开始时间"
                format="YYYY 年 MM 月 DD 日 HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="禁止入场" prop="endtime">
              <el-date-picker
                v-model="newFormInline.endtime"
                type="datetime"
                placeholder="请输入禁止入场时间"
                format="YYYY 年 MM 月 DD 日 HH:mm"
                value-format="YYYY-MM-DD HH:mm"
              />
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="任务状态" prop="del">
              <el-radio-group v-model="newFormInline.del">
                <el-radio :label="0">已启用</el-radio>
                <el-radio :label="1">已停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </Motion>
          <Motion>
            <el-form-item label="考试说明" prop="description">
              <el-input
                type="textarea"
                v-model="newFormInline.description"
                clearable
                placeholder="请输入考试说明"
                :rows="8"
              />
            </el-form-item>
          </Motion>
        </el-form>
      </el-card>
    </div>
    <div class="w-[calc(100%-500px)]">
      <el-card>
        <PureTableBar title="试卷列表" :columns="columns" @refresh="onSearch">
          <template v-slot="{ size, dynamicColumns }">
            <pure-table
              align-whole="center"
              showOverflowTooltip
              table-layout="auto"
              :loading="loading"
              :size="size"
              adaptive
              :data="paperList"
              :columns="dynamicColumns"
              :pagination="pagination"
              :paginationSmall="size === 'small' ? true : false"
              :header-cell-style="{
                background: 'var(--el-fill-color-light)',
                color: 'var(--el-text-color-primary)'
              }"
              @selection-change="handleSelectionChange"
              @page-size-change="handleSizeChange"
              @page-current-change="handleCurrentChange"
              border
            >
              <template #operation="{ row }">
                <el-button
                  class="reset-margin"
                  link
                  type="primary"
                  :size="size"
                  :icon="useRenderIcon(EditPen)"
                  @click="selectRow(row)"
                  v-if="newFormInline.paperid != row.id"
                >
                  选择
                </el-button>
                <div v-if="newFormInline.paperid == row.id">已选择</div>
              </template>
            </pure-table>
          </template>
        </PureTableBar>
      </el-card>
    </div>
  </div>
</template>
